import React, {Component} from "react";

import './index.css';

export default class Footer extends Component {

    handleClearDone = () => {
        if (window.confirm('是否确定清除已完成?')) {   
            this.props.clearAllDone();
        }
    }

    handleCheckAll = (event) => {
        
        this.props.checkAll(event.target.checked);
    }

    render() {
        const {todos} = this.props;
        const total = todos.length;
        const doneCount = todos.reduce((num, todoObj) => {
            return num += (todoObj.done ? 1 : 0)
        }, 0);
        return (
            <div className="todo-footer">
                <label>
                    {/* 注意: 复选框添加加了checked属性就必须要添加 onChange事件 */}
                    <input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0}/>
                </label>
                <span>
                    <span>已完成 {doneCount} </span> / 全部 {total}</span>
                <button onClick={() => {this.handleClearDone()}} className="btn btn-danger">清除已完成任务</button>
            </div>
        );
    }
}